<template>
    <div class="contentmain">
        <el-row>
            <el-col :span="24">
                <el-button @click="changeTable(1)" :class="r1?isActiveclass:''">入库详情</el-button>
                <el-button @click="changeTable(2)" :class="r2?isActiveclass:''">调货详情</el-button>
                <el-button @click="changeTable(3)" :class="r3?isActiveclass:''">盘点详情</el-button>
                <el-button @click="changeTable(4)" :class="r4?isActiveclass:''">报损详情</el-button>
                <el-button @click="changeTable(5)" :class="r5?isActiveclass:''">订货详情</el-button>
                <el-button @click="changeTable(6)" :class="r6?isActiveclass:''">销售详情</el-button>
                <el-button style="float:right" @click="goback()">返回</el-button>
            </el-col>
        </el-row>
        <el-row class="mgt">
            <el-col :span="24" class="bg">
                {{text}}
            </el-col>
            <el-col :span="24">
                <PutInStorage v-show="r1"/>
                <Inventory v-show="r3"/>
                <TransferCargo v-show="r2"/>
                <ReportedLoss v-show="r4"/>
                <Booking v-show="r5"/>
                <Sales v-show="r6"/>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import PutInStorage from 'components/Drp/DrpDetail/PutInStorage.vue'
import Inventory from 'components/Drp/DrpDetail/Inventory.vue'
import TransferCargo from 'components/Drp/DrpDetail/TransferCargo.vue'
import ReportedLoss from 'components/Drp/DrpDetail/ReportedLoss.vue'
import Booking from 'components/Drp/DrpDetail/Booking.vue'
import Sales from 'components/Drp/DrpDetail/Sales.vue'
import qs from 'qs'
export default{
    data(){
        return{
            text:'入库详情',
            r1:true,
            r2:false,
            r3:false,
            r4:false,
            r5:false,
            r6:false,
            i:0,
            isActiveclass:'isActive'
        }
    },
    components:{
        PutInStorage,Inventory,TransferCargo,ReportedLoss,Booking,Sales
    },
    activated(){
        var url=window.location.href;
        if(url.indexOf('?')!=-1){
            var param=''
            param=url.split('?')[1]
            var node=qs.parse(param)
            this.$store.state.jxcdetial=parseInt(node.id)
            // console.log(this.$store.state.jxcdetial)
            if(node.type){
                this.changeTable(parseInt(node.type))
            }
        }else{

        }
    },
    methods:{
        goback(){
            this.$router.go(-1)
        },
        changeTable(i){
            switch(i){
                case 1:
                    this.r1=true
                    this.r2=false
                    this.r3=false
                    this.r4=false
                    this.r5=false
                    this.r6=false
                    this.text='入库详情'
                    break;
                case 2:
                    this.r1=false
                    this.r2=true
                    this.r3=false
                    this.r4=false
                    this.r5=false
                    this.r6=false
                    this.text='调货详情'
                    break;
                case 3:
                    this.r1=false
                    this.r2=false
                    this.r3=true
                    this.r4=false
                    this.r5=false
                    this.r6=false
                    this.text='盘点详情'
                    break;
                case 4:
                    this.r1=false
                    this.r2=false
                    this.r3=false
                    this.r4=true
                    this.r5=false
                    this.r6=false
                    this.text='报损详情'
                    break;
                case 5:
                    this.r1=false
                    this.r2=false
                    this.r3=false
                    this.r4=false
                    this.r5=true
                    this.r6=false
                    this.text='订货详情'
                    break;
                case 6:
                    this.r1=false
                    this.r2=false
                    this.r3=false
                    this.r4=false
                    this.r5=false
                    this.r6=true
                    this.text='销售详情'
                    break;
            }
        }
    }
}
</script>
<style scoped>
.mgt{
    margin-top: 30px;
}
.bg{
    background-color: #0170c1;
    color:#fff;
    padding: 6px
}
.isActive{
    color: #3a8ee6;
    border-color: #3a8ee6;
    outline: 0;
}
</style>
